<template>
  <div class="detail-container">
      <el-card shadow="never" style="margin-top: 15px">
          <div class="operate-container">
              <i class="el-icon-warning color-danger" style="margin-left: 20px"></i>
              <span class="color-danger">当前状态：{{orderInfo.deliverStateStr}}</span>
          </div>
          <el-form  size="mini" label-width="100px" style="margin-top:20px;width:95%" v-loading="loading">
              <el-row>
                  <el-col :span="8">
                      <el-form-item label="结算单号：">{{orderInfo.settlementNo}}</el-form-item>
                  </el-col>
                  <el-col :span="8">
                      <el-form-item label="结算日期：">{{orderInfo.settlementDate}}</el-form-item>
                  </el-col>
                  <el-col :span="8">
                      <el-form-item label="收款方：">{{orderInfo.receivingCustomerName}}</el-form-item>
                  </el-col>
              </el-row>
              <el-row>

                  <el-col :span="8">
                      <el-form-item label="收款方式：">{{orderInfo.payType |  fiferPayState}}</el-form-item>
                  </el-col>
                  <el-col :span="8">
                      <el-form-item label="合计结算费用：">{{orderInfo.sumAmount}}</el-form-item>
                  </el-col>
                  <el-col :span="8">
                      <el-form-item label="实际结算费用：">{{orderInfo.settlementAmount}}</el-form-item>
                  </el-col>
              </el-row>
              <el-row>

              </el-row>
              <el-row>
                  <el-col :span="8">
                      <el-form-item label="付款日期：">{{orderInfo.payDate}}</el-form-item>
                  </el-col>
                  <el-col :span="8">
                      <el-form-item label="付款人：">{{orderInfo.payUsername}}</el-form-item>
                  </el-col>
                  <el-col :span="8">
                      <el-form-item label="付款凭证：">
                          <img v-for="item in orderInfo.files" :src="item" @click="fullImg(item)" style="width:80px;height:80px;cursor: pointer;object-fit: contain"/>
                      </el-form-item>
                  </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="运费归属人：">{{orderInfo.belongUserName}}</el-form-item>
                </el-col>
                  <el-col :span="16">
                      <el-form-item label="付款备注：">{{orderInfo.payRemark}}</el-form-item>
                  </el-col>
              </el-row>

              <el-form-item :label="orderInfo.billType == 0  ? '发货单列表：': orderInfo.billType == 1 ? '入库单列表：' : '其它单据列表：'" v-if="orderInfo.billType != 2">
                  <div class="goodsList" style="margin-top:10px;">
                      <!--发货单-->
                      <el-table ref="sendTable"
                                v-if="orderInfo.billType == 0"
                                :data="orderInfo.deliverList"
                                style="width: 100%;font-size: 12px"
                                border>
                          <el-table-column label="发货单号"  align="center" width="150">
                              <template slot-scope="scope">{{scope.row.deliverSn}}</template>
                          </el-table-column>
                          <el-table-column label="发货日期"  align="center" width="120">
                              <template slot-scope="scope">{{scope.row.shipTime}}</template>
                          </el-table-column>
                          <el-table-column label="客户名称" width="200">
                              <template slot-scope="scope">{{scope.row.customerName}}</template>
                          </el-table-column>
                          <el-table-column label="发货数量"  align="center">
                              <template slot-scope="scope">{{scope.row.shipNum}}</template>
                          </el-table-column>
                          <el-table-column label="实际运费"  align="center">
                              <template slot-scope="scope">{{scope.row.actualFreight}}</template>
                          </el-table-column>
                          <el-table-column label="物流毛利"  align="center">
                            <template slot-scope="scope">{{scope.row.logisticsProfit}}</template>
                          </el-table-column>
                          <el-table-column label="司机运费"  align="center">
                              <template slot-scope="scope">{{scope.row.driverExpress}}</template>
                          </el-table-column>
                          <el-table-column label="收款人"  align="center">
                              <template slot-scope="scope">{{scope.row.payeeUsername}}</template>
                          </el-table-column>
                          <el-table-column label="费用凭证"  align="center" width="300">
                              <template slot-scope="scope">
                                  <img :src="item" v-for="item in scope.row.costVoucher" style="width:30px;height:30px;cursor: pointer;object-fit: contain" @click="fullImg(item)"/>
                              </template>
                          </el-table-column>
                          <el-table-column label="费用备注"  width="300">
                              <template slot-scope="scope">{{scope.row.expressRemark}}</template>
                          </el-table-column>
                          <el-table-column label="到货凭证"  align="center"  width="300">
                              <template slot-scope="scope">
                                  <img :src="item" v-for="item in scope.row.goodsReceipt" style="width:30px;height:30px;cursor: pointer;object-fit: contain" @click="fullImg(item)"/>
                              </template>
                          </el-table-column>
                          <el-table-column label="到货备注"  width="300">
                              <template slot-scope="scope">{{scope.row.goodsReceiptRemark}}</template>
                          </el-table-column>
                          <el-table-column label="状态"  align="center">
                              <template slot-scope="scope">
                                  {{scope.row.settlementState==0 ? '未结算' :'已结算' }}
                              </template>
                          </el-table-column>
                      </el-table>
                      <!--数据列表 入库单-->
                      <el-table
                              ref="sendTable"
                              v-if="orderInfo.billType == 1"
                              :data="orderInfo.deliverList"
                              border
                              style="width: 100%; margin-top: 20px">
                          <el-table-column
                                  align="center"
                                  label="单据类型"
                                  width="150">
                              <template slot-scope="scope">
                                  {{scope.row.billType}}
                              </template>
                          </el-table-column>
                          <el-table-column
                                  align="center"
                                  label="入库单号"
                                  width="150">
                              <template slot-scope="scope">
                                  {{scope.row.entrySn}}
                              </template>
                          </el-table-column>
                          <el-table-column
                                  align="center"
                                  label="入库日期"
                                  width="100">
                              <template slot-scope="scope">
                                  {{scope.row.entryTime}}
                              </template>
                          </el-table-column>
                          <el-table-column
                                  label="供应商名称"
                                  width="300"
                                  align="center">
                              <template slot-scope="scope">
                                  {{scope.row.supplierName}}
                              </template>
                          </el-table-column>
                          <el-table-column
                                  align="center"
                                  prop="fromCompany"
                                  label="合同公司"
                                  width="100">
                          </el-table-column>
                          <el-table-column
                                  label="数量"
                                  width="100"
                                  align="center">
                              <template slot-scope="scope">
                                  {{scope.row.goodsNum}}
                              </template>
                          </el-table-column>
                          <el-table-column
                                  width="100"
                                  align="center"
                                  label="业务员">
                              <template slot-scope="scope">
                                  {{scope.row.userName}}
                              </template>
                          </el-table-column>
                          <el-table-column
                                  label="运费"
                                  width="100"
                                  align="center">
                              <template slot-scope="scope">
                                  {{scope.row.freight}}
                              </template>
                          </el-table-column>
                        <el-table-column label="物流毛利"  align="center">
                          <template slot-scope="scope">{{scope.row.logisticsProfit}}</template>
                        </el-table-column>
                          <el-table-column
                                  align="center"
                                  label="司机运费"
                                  width="100">
                              <template slot-scope="scope">
                                  {{scope.row.driverFreight}}
                              </template>
                          </el-table-column>
                          <el-table-column
                                  align="center"
                                  label="收款人"
                                  width="100">
                              <template slot-scope="scope">
                                  {{scope.row.payeeUsername}}
                              </template>
                          </el-table-column>
                          <el-table-column
                                  align="center"
                                  label="费用凭证"
                                  width="300">
                              <template slot-scope="scope">
                                  <img :src="item" v-for="item in scope.row.costVoucher" style="width:80px;height:80px;cursor: pointer;object-fit: contain" @click="fullImg(item)"/>
                              </template>
                          </el-table-column>
                          <el-table-column
                                  align="center"
                                  label="报销状态"
                                  width="100">
                              <template slot-scope="scope">
                                  {{scope.row.isFreightSettled}}
                              </template>
                          </el-table-column>
                      </el-table>
                      <!--数据列表 其它单据-->
                      <el-table
                              ref="sendTable"
                              v-if="orderInfo.billType == 2"
                              :data="orderInfo.deliverList"
                              border
                              style="width: 100%; margin-top: 20px">
                          <el-table-column
                                  align="center"
                                  label="单据类型"
                                  width="150">
                              <template slot-scope="scope">
                                  {{scope.row.billType}}
                              </template>
                          </el-table-column>
                          <el-table-column
                                  align="center"
                                  label="单据编号"
                                  width="150">
                              <template slot-scope="scope">
                                  {{scope.row.deliverSn}}
                              </template>
                          </el-table-column>
                          <el-table-column
                                  align="center"
                                  label="日期"
                                  width="100">
                              <template slot-scope="scope">
                                  {{scope.row.shipTime}}
                              </template>
                          </el-table-column>
                          <el-table-column
                                  label="供应商"
                                  width="150"
                                  align="center">
                              <template slot-scope="scope">
                                  {{scope.row.customerName}}
                              </template>
                          </el-table-column>
                          <el-table-column
                                  align="center"
                                  prop="entryType"
                                  label="出库类别"
                                  width="100">
                          </el-table-column>
                          <el-table-column
                                  label="运费"
                                  width="100"
                                  align="center">
                              <template slot-scope="scope">
                                  {{scope.row.actualFreight}}
                              </template>
                          </el-table-column>
                        <el-table-column label="物流毛利"  align="center">
                          <template slot-scope="scope">{{scope.row.logisticsProfit}}</template>
                        </el-table-column>
                          <el-table-column
                                  width="100"
                                  align="center"
                                  label="司机运费">
                              <template slot-scope="scope">
                                  {{scope.row.driverExpress}}
                              </template>
                          </el-table-column>
                          <el-table-column
                                  label="收款人"
                                  width="150"
                                  align="center">
                              <template slot-scope="scope">
                                  {{scope.row.payeeUsername}}
                              </template>
                          </el-table-column>
                          <el-table-column
                                  align="center"
                                  label="费用凭证"
                                  width="300">
                              <template slot-scope="scope">
                                  <img :src="item" v-for="item in scope.row.costVoucher" style="width:80px;height:80px;cursor: pointer;object-fit: contain" @click="fullImg(item)"/>
                              </template>
                          </el-table-column>
                          <el-table-column
                                  align="center"
                                  label="报销状态"
                                  width="100">
                              <template slot-scope="scope">
                                  {{scope.row.settlementState == 0 ? '未报销' : '已报销'}}
                              </template>
                          </el-table-column>
                      </el-table>
                  </div>
              </el-form-item>

              <el-form-item label="上传凭证：" v-if="orderInfo.billType == 2">
                  <img :src="item" v-for="item in orderInfo.applyPicUrls" @click="fullImg(item)" style="width:80px;height:80px;cursor: pointer;object-fit: contain"/>
              </el-form-item>

              <el-form-item label="备注：">
                  {{orderInfo.remark}}
              </el-form-item>
              <el-form-item>


              </el-form-item>
          </el-form>
          <div style="text-align: center;clear: both;margin-top:20px">

              <!--待申请人确认-->
              <div v-if="orderInfo.settlementState == 0 && orderInfo.isNeedMyCheck == 1">
                  <el-button type="primary" @click="shenhe('userCheck')" :loading="btnLoading" size="small">审核</el-button>
                  <el-button @click="delDate" size="small">取消</el-button>
              </div>

              <!--待申请负责人审核-->
              <div v-if="orderInfo.settlementState == 15 && orderInfo.isNeedMyCheck == 1">
                <el-button type="primary" @click="shenhe('departmentCheck')" :loading="btnLoading" size="small">审核</el-button>
                <el-button @click="showCancel" size="small">回退</el-button>
              </div>

              <!--待财务确认或财务经理-->
              <div v-if="(orderInfo.settlementState == 20 || orderInfo.settlementState == 25) && orderInfo.isNeedMyCheck == 1">
                  <el-button @click="delDate" size="small">取消</el-button>
              </div>

              <!--待总经理审核-->
              <div v-if="orderInfo.settlementState == 30 && orderInfo.isNeedMyCheck == 1">
                  <el-button type="primary" @click="shenhe('bossCheck')" :loading="btnLoading" size="small">审核</el-button>
                  <el-button @click="showCancel" size="small">回退</el-button>
              </div>

              <!--待付款-->
              <div v-if="orderInfo.settlementState == 40 && orderInfo.isNeedMyCheck == 1">
                  <el-button @click="delDate" size="small">取消</el-button>
              </div>

          </div>

          <div style="margin-top: 20px;clear: both">
              <el-menu :default-active="logTab" class="el-menu-demo" mode="horizontal">
                  <el-menu-item index="1">操作记录</el-menu-item>
              </el-menu>
          </div>

          <div style="margin-top:20px;border:1px solid #EBEEF5;padding:20px 20px 0 20px">
              <div v-if="logTab == 1">
                  <el-timeline>
                      <el-timeline-item
                              v-for="(activity, index) in orderInfo.operateLogs"
                              :key="index">
                         <span>
                             <span style="padding-right:10px;">{{activity.createdAt}}</span>：{{activity.userName}} {{activity.content}}
                             <span v-show="activity.remark && activity.remark != ''" style="color:red;padding-left:5px">备注：{{activity.remark}}</span>
                         </span>
                      </el-timeline-item>
                  </el-timeline>
                  <div style="color:#888;padding:20px;text-align: center;font-size:12px" v-if="orderInfo.operateLogs && orderInfo.operateLogs.length == 0">- 暂无数据 -</div>
              </div>

          </div>
      </el-card>


      <!--放大图片-->
      <el-dialog
              :visible.sync="dialogVisible4"
              width="800px">
          <img :src="fullSrc" style="width:100%;"/>
      </el-dialog>

      <!--回退弹窗-->
      <el-dialog
              :close-on-click-modal="false"
              title="审核回退"
              :visible.sync="dialogVisible2"
              width="500px">
          <el-form :model="passForm" size="mini" label-width="100px" ref="passForm" :rules="rules2">
              <el-form-item label="备注信息：" prop="remark">
                  <el-input :autosize="{ minRows: 2, maxRows: 6}" type="textarea" v-model="passForm.remark"></el-input>
              </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
          <el-button  @click="dialogVisible2 = false">取消</el-button>
          <el-button @click="shenhe('back')" :loading="btnLoading2" type="primary">确定</el-button>
      </span>
      </el-dialog>

  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import store from '@/store'
  import {showSettlement,deleteSettlement,settlementProcess} from '@/api/partner'
  import {validateCommission} from '@/utils/validate';
  import "@/utils/jQuery.print"
  const defaultForm = {
    receivingCustomerName:'',
    settlementDate:'',
    payType:1,
    settlementAmount:'',
    sumAmount:'',
    deliverIds:[],
    remark:'',
    deliverIdstr:''
  };
  const defaultListQuery = {
    keywords:'',
    settlementState:0,
    pageNum: 1,
    pageSize: 10,
  }
  export default {
    name: "customerDetail",
    data(){
      const isvalidateCommission = (rule, value, callback) => {
        if (!validateCommission(parseFloat(value))) {
          callback(new Error('非负整数或小数'))
        } else if(value > 99999999){
          callback(new Error('最大值为99999999'))
        }else {
          callback()
        }
      };
      return{
        roles:store.getters.roles ? store.getters.roles : [],
        settlementId:this.$route.query.id,
        orderInfo:{},
        loading:true,
        dialogVisible4:false,
        fullSrc:'',
        logTab:'1',
        btnLoading:false,

          btnLoading2:false,
          dialogVisible2:false,
          passForm:{
              remark:'',
          },
          rules2:{
              remark:[{required: true, trigger: 'blur' ,message: '请输入回退原因',}],
          },
      }
    },
    computed: {
      ...mapGetters([
        'name',
        'mobile',
        'userId'
      ]),
    },
    created() {
      this.getPageInfo();
    },
    filters: {
        fiferPayState(val){
            if(val == 1){
                return '银行汇款'
            }else if(val == 2){
                return '现金'
            }else if(val == 3){
                return '支付宝'
            }else if(val == 4){
                return '微信'
            }
        },
    },
    methods:{

        //显示回退弹窗
        showCancel(){
            this.dialogVisible2 = true;
            this.passForm.remark = ''
        },

        //审核
        shenhe(type){
            let key;
            let data = {};
            data.settlementId= this.settlementId;
            data.action = type;
            if(type != 'back'){
                key = 'btnLoading';
                this[key] = true;
                this.submitPass(data,key)
            }else{
                key = 'btnLoading2';
                data.remark = this.passForm.remark;
                this.$refs.passForm.validate((valid) => {
                    if (valid) {
                        this[key] = true;
                        this.submitPass(data,key)
                    }
                });
            }
        },

        submitPass(data,key){
            settlementProcess(data).then(()=>{
                this.$message({
                    message: '操作成功！',
                    type: 'success'
                });
                this[key] = false;
                this.dialogVisible2 = false;
                this.getPageInfo()
            }).catch(()=>{
                this[key] = false;
            })
        },

        //取消
        delDate(){
            this.$confirm('是否确定删除', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteSettlement({settlementId:this.settlementId,isDelete : 1}).then(()=>{
                    this.$message({
                        type: 'success',
                        message: '操作成功!'
                    });
                    this.$router.push({name:'deliverFreightSettlement'})
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消操作'
                });
            });
        },

        fullImg(src){
            console.log("asdfdas")
            this.dialogVisible4 = true;
            this.fullSrc = src;
        },

      //获取合同详情
      getPageInfo(){
        this.loading = true;
          showSettlement({settlementId:this.settlementId}).then(res=>{
          this.orderInfo = res;
          // if(this.orderInfo.billType != 0){
          //       this.orderInfo.deliverList.forEach((el)=>{
          //           // el.costVoucher = el.costVoucher != '' ? el.costVoucher.split(",") : [];
          //           el.costVoucher = el.costVoucher.length>0 ? el.costVoucher: [];
          //       })
          // }
          this.loading = false;
        });
      },

    }
  }
</script>

<style  lang="scss">
  .detail-container {
    width: 90%;
    padding: 20px 20px 20px 20px;
    margin: 20px auto;
    .el-card__header{
      background: #f8f8f8;
      .kehu-name{
        display: inline-block;
        font-size:14px;
        vertical-align: middle;
      }
      .kehu-label{
        font-size:12px;
        vertical-align: middle;
        display: inline-block;
        margin-left:15px;
        color: #409eff;
        background: #ecf5ff;
        border: 1px solid #b3d8ff;
        height:24px;
        line-height: 24px;
        padding:0 10px;
        border-radius: 5px;
      }
      .kehu-info{
        text-align: right;
        font-size: 12px;
        color:#333;
        line-height: 20px;
        span{
          padding-left:16px;
        }
      }
    }
    .operate-container {
      background: #F2F6FC;
      height: 80px;
      margin: -20px -20px 0;
      line-height: 80px;
    }
  }
  .price-block{
    font-size:12px;
    line-height:30px;
    .lab{
      display: inline-block;
      width:100px;
      text-align: right;
    }
    .text{
      display: inline-block;
    }
  }
  #print-div{
    font-size:12px;
    .title{
      font-size:18px;
      font-weight: bold;
      text-align: center;
      line-height: 40px;
    }
    .paper-top{
      margin-top:20px;
      line-height: 30px;
    }
    .good-table{
      margin-top:20px;
      table{
        border-left:1px solid #ddd;
        border-bottom:1px solid #ddd;
        td,th{
          font-weight: normal;
          border-right:1px solid #ddd;
          border-top:1px solid #ddd;
          padding:5px 10px;
          line-height: 22px;
        }
      }
    }
    .paper-bottom{
      margin-top:20px;
      line-height: 30px;
    }
  }
</style>
